fix(console): standardize Status badge colors (blue Active) on agents + brokers - #116

🤖 Codex Code Review

No findings.

• The change is UI-only and matches the eval-agents token status badges in client/src/pages/console-eval-agents.tsx.
• Badge supports both destructive and outline, so this should not introduce runtime/type issues.
• No security, logic, performance, or maintainability concerns found in the PR diff.

Tests not run; not necessary for this small presentational change.

🤖 Claude Code Review

The change is a two-line, purely presentational swap and it does exactly what the title claims.

Verified:

• client/src/pages/admin-brokers.tsx:195-196 now matches console-eval-agents.tsx:517-519 exactly (variant="destructive" / variant="outline"), which is also what console-api-keys.tsx:164 uses. Consistency goal achieved.
• Using variant instead of className="bg-red-700" / bg-blue-500 is the right fix, not just a color tweak: the hardcoded backgrounds overrode the variant's foreground/border tokens, so bg-blue-500 was rendering with the default variant's text-primary-foreground — a theme-dependent contrast hazard. Variants keep light/dark theming intact.
• No behavioral, auth, or data-flow impact. No security, performance, or correctness concerns.

Minor, optional: the live-state badges in this same file (admin-brokers.tsx:47,49) still use hardcoded bg-green-500 / bg-yellow-500. That's not an inconsistency introduced here — console-eval-agents.tsx:73,75 does the identical thing, so the two pages remain aligned. If those raw colors are ever migrated to variants, both files should move together.

Looks good to merge.

🤖 Codex Code Review

Findings

• client/src/pages/console-eval-agents.tsx:519 and client/src/pages/admin-brokers.tsx:196 do not implement the PR description’s requested Active -> variant="outline" mapping. The PR leaves brokers as bg-blue-500 and changes eval-agent tokens from outline to bg-blue-500, so the final state is consistent with each other but inconsistent with the stated requirement. If the request is to match the eval-agents token Status variants described in the PR, both should be <Badge variant="outline">Active</Badge>.

No security, auth, injection, credential exposure, performance, or edge-case issues found in this small UI-only change.

🤖 Claude Code Review

Purely cosmetic two-line change to badge styling. No security, logic, or performance concerns — no data flow, conditionals, or API surface is touched. The Revoked → variant="destructive" swap in admin-brokers.tsx:195 is a clear improvement (theme token instead of hardcoded bg-red-700) and matches console-eval-agents.tsx.

Two minor points on the other half of the change:

bg-blue-500 for Active bypasses the theme token that already equals it

client/src/pages/console-eval-agents.tsx:519 and client/src/pages/admin-brokers.tsx:196

In the dark theme (:root in client/src/index.css:70), --primary: 217 91% 60% is exactly #3b82f6 — i.e. Tailwind's blue-500. So <Badge className="bg-blue-500"> renders identically to <Badge variant="default"> in dark mode, while giving up the light-theme override (--primary: 217 91% 50%, index.css:118). Using variant="default" would produce the same visual result you're after, stay theme-aware, and be symmetric with the variant="destructive" sibling.

There's a small contrast consequence: bg-blue-500 keeps the default variant's text-primary-foreground, which is white in .light. White on #3b82f6 is ~3.98:1 — under WCAG AA 4.5:1 for the badge's 12px text. The intended bg-primary (hsl(217 91% 50%)) clears it at ~4.9:1. Dark mode is fine either way (~4.5:1 with the near-black foreground).

Slight consistency regression vs. #114

client/src/pages/console-api-keys.tsx:168 uses <Badge variant="default">Active</Badge>. After this PR, API keys and agents/brokers agree in dark mode but diverge in light mode. Switching these two call sites to variant="default" resolves both points at once.